<template>
  <div
    :style="{
      height: isExpanded ? 'auto' : '50px',
      overflow: isExpanded ? 'visible' : 'hidden'
    }"
  >
    <div ref="top" class="TopBottom">
      <el-dropdown
        trigger="click"
        v-for="item in filmenusList1"
        :key="item.contextmenuId"
        @command="handleCommand"
      >
        <el-button
          style="
            margin-right: 15px;
            margin-bottom: 15px;
            background-color: #1890ff;
            color: #fff;
            border: 'none';
          "
          ><i class="el-icon-plus" style="margin-right: 5px"></i
          >{{ item.contextmenuName }}</el-button
        >
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="i in item.childMenus"
            :key="i.contextmenuId"
            :command="i"
            >{{ i.contextmenuName }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-button
        v-for="item in filmenusList2"
        :key="item.contextmenuId"
        @click="onclick(item)"
        :style="{
          'margin-right': '15px',
          'margin-bottom': '15px',
          'background-color': getButtonBgColor(item),
          color: '#fff',
          border: 'none'
        }"
      >
        <i
          style="margin-right: 5px"
          :class="
            item.contextmenuType === 'CreateDevice'
              ? 'el-icon-plus'
              : item.contextmenuType === 'ViewDevice'
              ? 'el-icon-view'
              : item.contextmenuType === 'ModifyDevice'
              ? 'el-icon-edit'
              : item.contextmenuType === 'BatchMoveEquipment'
              ? 'el-icon-plus'
              : item.contextmenuType === 'RemoveDevice'
              ? 'el-icon-delete'
              : item.contextmenuType === 'MoveEquipment'
              ? 'el-icon-s-promotion'
              : item.contextmenuType === 'AttachManage'
              ? 'el-icon-document-add'
              : item.contextmenuType === 'ScreenMoveUp'
              ? 'el-icon-top'
              : item.contextmenuType === 'ScreenMoveDown'
              ? 'el-icon-bottom'
              : item.contextmenuType === 'MoveDevice'
              ? 'el-icon-position'
              : item.contextmenuType === 'CopyCreateDevice'
              ? 'el-icon-copy-document'
              : item.contextmenuType === 'CreateRelation'
              ? 'el-icon-link'
              : item.contextmenuType === 'RemoveRelation'
              ? 'el-icon-delete'
              : ''
          "
        />{{ item.contextmenuName }}</el-button
      >
      <div class="isExpanded" v-if="isShow" @click="toggleExpand">
        {{ isExpanded ? '收起' : '展开'
        }}<i
          :class="isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getContextmenusApi } from '@/api/Ledger3'
export default {
  props: {
    nodeList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      menusList: [],
      dialogVisible: false,
      title: '',
      isExpanded: false,
      isShow: false
    }
  },
  computed: {
    // isShow () {
    //   if(this.offHeight)
    // },
    filmenusList1() {
      return this.menusList.filter((item) => {
        return (
          item.childMenus.length > 0 &&
          (item.contextmenuType === 'CreateDevice' ||
            'ViewDevice' ||
            'ModifyDevice' ||
            'RemoveDevice') &&
          item.contextmenuName !== '批量新增'
        )
      })
    },

    filmenusList2() {
      return this.menusList.filter((item) => {
        return (
          item.childMenus.length == 0 &&
          (item.contextmenuType == 'CreateDevice' ||
            item.contextmenuType == 'ViewDevice' ||
            item.contextmenuType == 'ModifyDevice' ||
            item.contextmenuType == 'RemoveDevice' ||
            item.contextmenuType == 'MoveDevice' ||
            item.contextmenuType == 'CopyCreateDevice' ||
            item.contextmenuType == 'CreateRelation' ||
            item.contextmenuType == 'RemoveRelation')
        )
      })
    }
  },
  watch: {
    nodeList: {
      handler(newValue, oldValue) {
        this.getContextmenus()
        this.$nextTick(() => {
          this.calculateList()
        })
      },
      deep: true
    },
    menusList: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.calculateList()
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getButtonBgColor(item) {
      return item.contextmenuType === 'RemoveDevice' ||
        item.contextmenuType === 'RemoveRelation'
        ? '#f78989'
        : '#1890ff'
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    calculateList() {
      // 这是默认一行数据的高度
      const oneHeight = 60
      const curHeight = this.$refs.top.offsetHeight
      console.log(1, curHeight)
      if (curHeight > oneHeight) {
        this.isExpanded = false
        this.isShow = true
      } else {
        this.isExpanded = false
        this.isShow = false
      }
    },
    async getContextmenus() {
      const res = await getContextmenusApi({
        nodeModelId: this.nodeList.treeviewNodeId
      })
      this.menusList = res.data.list
    },
    onclick(item) {
      console.log(item)
      this.$emit('diaData', item)
    },
    handleCommand(command) {
      this.$emit('diaData', command)
    }
  }
}
</script>

<style lang="scss" scoped>
.TopBottom {
  position: relative;
  padding-right: 60px;
  width: 100%;
  overflow: hidden;
  .isExpanded {
    position: absolute;
    right: 30px;
    top: 10px;
    color: #1890ff;
  }
}
::v-deep.el-button {
  margin-left: 0;
}
// .el-dropdown-menu{
//   width: 100px;
//   height: 100%;
// }
</style>
